<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
<title>选择插件DEMO</title>
<style type="text/css">
	#slide_select_wrapper{
		width:100%;
		height:150px;
		position: fixed;
		left:0px;
		bottom:0px;
		padding:10px 0px;
		margin:0px;
		background:#efefef;
	}
	.slide_select{
		list-style:none;
		padding:0px;
		margin:0px;
		height:150px;
		overflow:auto;
	}
	ul.slide_select li{
		line-height:30px;
		font-size: 24px;
	}
	.line_top, .line_bottom{
		border:1px solid #000000;
		margin:0px;
		padding:0px;
		width:100%;
		position:absolute;
	}
	.line_top{
		top:70px;
	}
	.line_bottom{
		top:100px;
	}
	.prev_2, .next_2{
		opacity: 0.3;
	}
	
	.prev_1, .next_1{
		opacity: 0.5;
	}
	.prev_1{
		transform:rotateX(30deg);
		-moz-transform:rotateX(30deg);
	}
	
	.prev_2{
		transform:rotateX(60deg);
		-moz-transform:rotateX(60deg);
	}
	.next_1{
		transform:rotateX(-30deg);
		-moz-transform:rotateX(-30deg);
	}
	.next_2{
		transform:rotateX(-60deg);
		-moz-transform:rotateX(-60deg);
	}
	.current{
		transform:rotateX(0deg);
		opacity:1;
	}
	.normal{
		transform:rotateX(90deg);
		opacity: 0.1;
	}
</style>

</head>
<body>
<h1>DEMO</h1>
<div id="slide_select_wrapper">
	<hr class="line_top" />
	<hr class="line_bottom" />
	<ul class="slide_select" id="slide_select">
		<li data-value="999999" class="prev_2" title="">请选择</li>
		<li data-value="110000" class="prev_1" title="北京市">北京市</li>
		<li data-value="120000" class="current" title="天津市">天津市</li>
		<li data-value="130000" class="next_1" title="河北省">河北省</li>
		<li data-value="140000" class="next_2" title="山西省">山西省</li>
		<li data-value="150000" title="内蒙古自治区">内蒙古自治区</li>
		<li data-value="210000" title="辽宁省">辽宁省</li>
		<li data-value="220000" title="吉林省">吉林省</li>
		<li data-value="230000" title="黑龙江省">黑龙江省</li>
		<li data-value="310000" title="上海市">上海市</li>
		<li data-value="320000" title="江苏省">江苏省</li>
		<li data-value="330000" title="浙江省">浙江省</li>
		<li data-value="340000" title="安徽省">安徽省</li>
		<li data-value="350000" title="福建省">福建省</li>
		<li data-value="360000" title="江西省">江西省</li>
		<li data-value="370000" title="山东省">山东省</li>
		<li data-value="410000" title="河南省">河南省</li>
		<li data-value="420000" title="湖北省">湖北省</li>
		<li data-value="430000" title="湖南省">湖南省</li>
		<li data-value="440000" title="广东省">广东省</li>
		<li data-value="450000" title="广西壮族自治区">广西壮族自治区</li>
		<li data-value="460000" title="海南省">海南省</li>
		<li data-value="500000" title="重庆市">重庆市</li>
		<li data-value="510000" title="四川省">四川省</li>
		<li data-value="520000" title="贵州省">贵州省</li>
		<li data-value="530000" title="云南省">云南省</li>
		<li data-value="540000" title="西藏自治区">西藏自治区</li>
		<li data-value="610000" title="陕西省">陕西省</li>
		<li data-value="620000" title="甘肃省">甘肃省</li>
		<li data-value="630000" title="青海省">青海省</li>
		<li data-value="640000" title="宁夏回族自治区">宁夏回族自治区</li>
		<li data-value="650000" title="新疆维吾尔自治区">新疆维吾尔自治区</li>
	</ul>
</div>
<!--<select id="demo">
	<option value='999999'>请选择</option>
	<option value='110000' title="北京市" >北京市</option>
	<option value='120000' title="天津市" >天津市</option>
	<option value='130000' title="河北省" >河北省</option>
	<option value='140000' title="山西省" >山西省</option>
	<option value='150000' title="内蒙古自治区" >内蒙古自治区</option>
	<option value='210000' title="辽宁省" >辽宁省</option>
	<option value='220000' title="吉林省" >吉林省</option>
	<option value='230000' title="黑龙江省" >黑龙江省</option>
	<option value='310000' title="上海市" >上海市</option>
	<option value='320000' title="江苏省" >江苏省</option>
	<option value='330000' title="浙江省" >浙江省</option>
	<option value='340000' title="安徽省" >安徽省</option>
	<option value='350000' title="福建省" >福建省</option>
	<option value='360000' title="江西省" >江西省</option>
	<option value='370000' title="山东省" >山东省</option>
	<option value='410000' title="河南省" >河南省</option>
	<option value='420000' title="湖北省" >湖北省</option>
	<option value='430000' title="湖南省" >湖南省</option>
	<option value='440000' title="广东省" >广东省</option>
	<option value='450000' title="广西壮族自治区" >广西壮族自治区</option>
	<option value='460000' title="海南省" >海南省</option>
	<option value='500000' title="重庆市" >重庆市</option>
	<option value='510000' selected title="四川省" >四川省</option>
	<option value='520000' title="贵州省" >贵州省</option>
	<option value='530000' title="云南省" >云南省</option>
	<option value='540000' title="西藏自治区" >西藏自治区</option>
	<option value='610000' title="陕西省" >陕西省</option>
	<option value='620000' title="甘肃省" >甘肃省</option>
	<option value='630000' title="青海省" >青海省</option>
	<option value='640000' title="宁夏回族自治区" >宁夏回族自治区</option>
	<option value='650000' title="新疆维吾尔自治区" >新疆维吾尔自治区</option>
</select>-->

<script type="text/javascript" src="js/slideselect.js"></script>
<script type="text/javascript">
	//var select  = new SlideSelect({
	//	target:document.getElementById("demo")
	//});
	
	var wrapper = document.getElementById("slide_select_wrapper");
	wrapper.addEventListener("touchmove", function(e){
		
	},false);
	var ul = document.getElementById("slide_select");
	var items = ul.getElementsByTagName("li");
	var len = items.length;
	var timeout = null;		  
	ul.addEventListener("scroll", function(e){
		var top = this.scrollTop;
		var index = Math.floor( top / 28) + 2;
		var current = items[index];
		for(var i in items){
			items[i].className = "normal";
		}
		
		
		
		current.className = "current";
		if(index > 1){
			items[ index -1].className = "prev_1";
			if(index > 2){
				items[index - 2].className = "prev_2";
			}
		}
		
		if(index < len -1 ){
			items[index+1].className = "next_1";
			if(index < len - 2){
				items[index+2].className = "next_2";
			}
		}
		
		if(timeout){
			clearTimeout(timeout);
		}
		var _this = this;
		timeout = setTimeout(function(){
			_this.scrollTop = (index - 2 )* 28;
		}, 300);
		
	}, false);
</script>
</body>
</html>